import {
  Component,
  EventEmitter,
  Input,
  OnInit,
  Output,
  ChangeDetectionStrategy,
} from '@angular/core';
import { Router } from '@angular/router';
export interface Tabs {
  title: string;
  link?: string;
}
@Component({
  selector: 'app-scrollable-tab',
  templateUrl: './scrollable-tab.component.html',
  styleUrls: ['./scrollable-tab.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ScrollableTabComponent implements OnInit {
  index: number = 0;
  @Input() tabs: Tabs[] = [];
  @Output() tabClick = new EventEmitter();
  constructor(private router: Router) {}
  trackByItems(index: number, item: Tabs): string {
    return item.title;
  }
  handelClickItem(index: number): void {
    this.index = index;
    // 发送事件
    this.tabClick.emit(this.tabs[index]);
  }
  ngOnInit(): void {
    this.checkedUrl();
  }
  checkedUrl(): void {
    let urlArr = this.router.url.split('/');
    let index = urlArr.length - 1;
    let params = urlArr[index];
    try {
      this.tabs.forEach((item, idx) => {
        if (item.link === params) {
          this.index = idx;
          throw new Error('');
        }
      });
    } catch (error) {}
  }
}
